<template>
	<view class="videoSwiper">

		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" @change="changefun" @animationfinish="animationfinish"
						:indicator-dots='false' :current="current" :circular="false" :vertical="true">
						<block v-if="PayVideo">
							<swiper-item v-for="(item,index) in PayVideo" :key="index" style="touch-action: none;">
								<!-- video -->
								<view class="new-swiper-item" v-if="index == current && item.type == 'video'"
									:class="item.type == 'video'?'uni-bg-black':'uni-bg-black1'"
									@click="btnPayVideo(item)">
									<video class="video" :id="'id'+index" auto-pause-if-navigate
										auto-pause-if-open-native :custom-cache="false" :show-play-btn='false'
										:show-fullscreen-btn="false" :show-center-play-btn='true' :controls="true"
										enable-play-gesture :src="item.videoUrl" loop :enable-progress-gesture="false">
									</video>
									<!-- 暂停键 -->
									<image class="iconVideoStop" v-if="videoType"
										src="https://img.aibbyp.com/wechat/images/nHome/videozt.png" mode=""></image>
								</view>
								<!-- image -->
								<view v-if="index == current && item.type == 'image'" class="new-swiper-item "
									:class="item.type == 'video'?'uni-bg-black':'uni-bg-black1'">

									<swiper :style="swiperheight" class="swiper square-dot" circular
										indicator-color='#ccc' indicator-active-color='#3065FA' :indicator-dots="true"
										:interval="50000" :duration="500" style="max-height: 1260rpx;">
										<swiper-item v-for="(item1,indeximg) in item.imageUrl" :key="indeximg"
											style="touch-action: none;">
											<image class="imgSwiper" @click.stop="previewImage(item.imageUrl,indeximg)"
												:src="$wanlshop.oss(item1)" mode="widthFix">
											</image>
										</swiper-item>
									</swiper>

								</view>
								<!-- 最下面发表看法 -->
								<!-- image 评论 -->
								<view class="bottomBox"
									v-if="shopData[current] && item.type == 'image' && index == current">
									<view class="flex1">
										<input class="uniInput" :focus='focus1' v-model="inputValue"
											placeholder="发表你的看法" confirm-type="send" @confirm="btnComment"
											:border="true" />
									</view>
									<view class="ml28 flex_ac">
										<view class="ml26">
											<u-icon @click="btnLike1(0)" name="heart" size="70"
												v-if="shopData[current].is_like == 0"></u-icon>
											<u-icon @click="btnLike1(1)" name="heart-fill" size="70"
												v-if="shopData[current].is_like == 1" color="#FF2A2A"></u-icon>
										</view>
										<view class="c3d f28 ml4">
											{{shopData[current].likes}}
										</view>
										<view class="ml24" @click="btnfocus">
											<u-icon name="chat" size="64"></u-icon>
										</view>
										<view class="c3d f28 ml4">
											{{shopData[current].comments}}
										</view>
										<image v-if="shopData[current].is_collect == 0" @click="btnCollect(0)"
											class="ml24" style="width: 52rpx;height: 52rpx;"
											src="https://img.aibbyp.com/wechat/images/nHome/shoucang4.png" mode="">
										</image>
										<image v-if="shopData[current].is_collect == 1" @click="btnCollect(1)"
											class="ml24" style="width: 52rpx;height: 52rpx;"
											src="https://img.aibbyp.com/wechat/images/nHome/shoucang2.png" mode="">
										</image>

										<view class="c3d f28 ml4">
											{{shopData[current].collect}}
										</view>
										<button class="buttonOpen ml24 mt8" open-type="share">
											<image style="width: 44rpx;height: 36rpx;"
												src="https://img.aibbyp.com/wechat/images/nHome/zf.png" mode="">
											</image>
										</button>
									</view>
								</view>
								<!-- video按钮 -->
								<view class="videoIcon"
									v-if="item.type == 'video' && shopData[current] && index == current">
									<!-- 头像 -->
									<view class="acatarBox">
										<view class="acatar">
											<image class="imgAcatar" :src="$wanlshop.oss(shopData[current].shop.avatar)"
												mode="" @click="btnAcatar">
											</image>
										</view>
										<view class="iconPlus" @click="btnGZ" v-if="shopData[current].follow == false">
											<image class="iconPlusImage"
												src="https://img.aibbyp.com/wechat/images/nHome/tj2.png" mode="">
											</image>
										</view>
									</view>
									<!-- 点赞 -->
									<view class="ml26 mt40">
										<u-icon @click="btnLike1(0)" name="heart-fill" size="70"
											v-if="shopData[current].is_like == 0" color="#fff"></u-icon>
										<u-icon @click="btnLike1(1)" name="heart-fill" size="70"
											v-if="shopData[current].is_like == 1" color="#FF2A2A"></u-icon>
									</view>
									<view class="cf f28 mt4">
										{{shopData[current].likes}}
									</view>
									<!-- 评论 -->
									<view class="mt20" @click="btnfocus">
										<u-icon name="chat-fill" size="70" color="#fff"></u-icon>
									</view>
									<view class="cf f28 mt4">
										{{shopData[current].comments}}
									</view>
									<!-- 收藏 -->
									<view class="mt20">
										<image v-if="shopData[current].is_collect == 0" @click="btnCollect(0)"
											style="width: 80rpx;height: 80rpx;"
											src="https://img.aibbyp.com/wechat/images/nHome/shoucang1.png" mode="">
										</image>
										<image v-if="shopData[current].is_collect == 1" @click="btnCollect(1)"
											style="width: 80rpx;height: 80rpx;"
											src="https://img.aibbyp.com/wechat/images/nHome/shoucang2.png" mode="">
										</image>
									</view>
									<view class="cf f28 mt4">
										{{shopData[current].collect}}
									</view>
									<!-- 分享 -->
									<button class="buttonOpen mt12" open-type="share">
										<image style="width: 58rpx;height: 54rpx;"
											src="https://img.aibbyp.com/wechat/images/nHome/fx2.png" mode="">
										</image>
									</button>
								</view>
								<!-- video goods 有商品链接 -->
								<view class="videoGoods"
									v-if="item.type == 'video' && shopData[current] && index == current">
									<view class="dwShop cf">
										<image v-if="shopData[current].goods"
											@click="$wanlshop.auth(`/pages/product/goods?id=${shopData[current].goods[0].id}`)"
											style="width: 288rpx;height: 60rpx;"
											src="https://img.aibbyp.com/wechat/images/nHome/gwcwz.png" mode="">
										</image>

										<view class="mt16 f28">
											{{shopData[current].title}}
										</view>
										<view class="f24 ce overflow_2">
											{{shopData[current].content}}
										</view>

									</view>
								</view>
								<!-- img goods 有商品链接 -->
								<view class="imageBox" v-if="item.type == 'image' && shopData[current]">
									<!-- 店铺信息 -->
									<view class="pl32 pr32" v-if="shopData[current]">
										<view class="flex_sb flex_ac mt32">
											<image class="imgAcatar" :src="$wanlshop.oss(shopData[current].shop.avatar)"
												mode="" @click="btnAcatar">
											</image>
											<view class="f28 fb ml20 flex1">
												{{shopData[current].shop.shopname}}
											</view>
											<view class="gz f24 ml20 cf" @click="btnGZ">
												{{shopData[current].follow ? '已关注':'关注'}}
											</view>
										</view>
										<view class="flex1 f28 mt20 fb">
											{{shopData[current].title}}
										</view>
										<view class=" f24 c3d overflow_2">
											{{shopData[current].content}}
										</view>
									</view>
									<!-- 图片页面 下面数据 商品信息 评论 -->
									<image v-if="shopData[current].goods"
										@click="$wanlshop.auth(`/pages/product/goods?id=${shopData[current].goods[0].id}`)"
										style="width: 288rpx;height: 60rpx;" class="ml32 mt12"
										src="https://img.aibbyp.com/wechat/images/nHome/gwcwz.png" mode="">
									</image>

								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
		</view>

		<!-- 视频播放弹出框 评论-->
		<u-popup v-if="popupShow" v-model="popupShow" mode="bottom" border-radius="32">

			<view class="popupBox">
				<view class="flex_start goodsBox mt20" v-if="shopData[current].goods"
					v-for="(i,lx) in shopData[current].goods" :key="lx">
					<view class="" @click="$wanlshop.auth(`/pages/product/goods?id=${shopData[current].id}`)">
						<image class="goodsImg" :src="$wanlshop.oss(i.image)" mode="">
						</image>
					</view>
					<view class="c3d ml24 flex1"
						@click="$wanlshop.auth(`/pages/product/goods?id=${shopData[current].id}`)">
						<view class="overflow_2">
							{{i.title}}
						</view>
						<view class="error tar fb">
							￥{{i.price}}
						</view>
					</view>

				</view>
				<view class="ml32 flex1 tar closeIcon">
					<u-icon name="close" size="32" @click="popupShow = false"></u-icon>
				</view>
				<scroll-view :scroll-y="true" class="mt12"
					:class="shopData[current].goods ? 'popupBoxScroll':'popupBoxScroll1'" @scrolltolower="scrolltolower"
					lower-threshold="300" scroll="scroll" style="touch-action: none;">
					<view class="mt24 f32 c6 fb tac">
						共{{shopData[current].comments}}条评论
					</view>

					<view class="commentsBox mt20">
						<view class="mb20" v-for="(item,iIndexa) in commentsData" :key="iIndexa">
							<view class="">
								<view class="flex_start">
									<image class="img" :src="$wanlshop.oss(item.user.avatar) "
										@click="$wanlshop.auth(`/pages/note/indexList?id=${item.user_id}&shop_id=${item.shop_id}`)"
										mode="">
									</image>
									<view class="f24 flex1 ml20">
										<view class="info">
											{{item.user.nickname}}
										</view>
										<view class="c3 f14">
											{{item.content}}
										</view>
										<view class="info f20">
											{{item.createtime_text}} {{item.city}}
											<text class="c3 ml8" @click="btnHH(item.id)"> 回复</text>
										</view>
									</view>
									<view class="ml32 flex_yy_center mt20">
										<u-icon @click="btnLike(item.id,iIndexa,1,'father')" name="heart-fill"
											color="#FF2A2A" v-if="item.is_like == 1"></u-icon>
										<u-icon @click="btnLike(item.id,iIndexa,0,'father')" name="heart"
											v-if="item.is_like == 0"></u-icon>
										<view class="f20 info">
											{{item.likes}}
										</view>
									</view>
								</view>
								<view class="ml55 mt20 mb20" v-for="(data,index1s) in item.children" :key="index1s">
									<view class="flex_start">
										<image class="img" :src="$wanlshop.oss(data.user.avatar) " mode=""></image>
										<view class="f24 flex1 ml20">
											<view class="info">
												{{data.user.nickname}}
											</view>
											<view class="c3 f14">
												<text class="info f20 mr12" v-if="data.top_nickname">
													回复给&nbsp;{{data.top_nickname}}</text>
												{{data.content}}
											</view>
											<view class="info f20">
												{{data.createtime_text}} {{data.city}}
												<text class="c3 ml8" @click="btnHH(data.id)"> 回复 </text>
											</view>
										</view>
										<view class="ml32 flex_yy_center mt20">
											<u-icon @click="btnLike(data.id,iIndexa,1,'son',index1s)" name="heart-fill"
												color="#FF2A2A" v-if="data.is_like == 1"></u-icon>
											<u-icon @click="btnLike(data.id,iIndexa,0,'son',index1s)" name="heart"
												v-if="data.is_like == 0"></u-icon>
											<view class="f20 info">
												{{data.likes}}
											</view>
										</view>

									</view>

								</view>
							</view>
						</view>
					</view>

					<view class="f24 info tac" v-if="!scrollType">
						没有更多数据了
					</view>
				</scroll-view>

				<view class="flex_ac inputBottom">
					<input class="uniInput" style="width: 100%;" :focus="hfFocus" @blur="hfBlur" v-model="inputValue"
						placeholder="发表你的看法" :border="true" confirm-type="send" @confirm="btnComment">
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {},
				shareShow: false,
				optionId: null,
				scrollType: true,
				parent_id: '',
				disableTrigger: true, //监听请求是否完成
				shopData: [],
				hfFocus: false,
				commentsData: [],
				focus1: false,
				inputValue: '',
				popupShow: false,
				PayVideo: [{
					type: null,
					details: {},
					goods: [],
				}],
				videoList: [],
				current: 0,
				index_: 0,
				videoContext: '',
				videoTitle: '',
				videoType: false,
				swiperheight: "0px",
				commentsPage: 1,

			}
		},
		computed: {},
		onLoad(options) {
			console.log(options);
			if (options.detailsType) {
				this.options = options
			}
			if (options.index) {
				this.commentsPage = Math.ceil((options.index - 0 + 1) / 10)
			}

			console.log(this.commentsPage, 'index');
			this.optionId = options.id
			this.getVideoInfo(options.id)
			if ((options.index - 0 + 1) % 10 == 0) {
				setTimeout(() => {
					this.commentsPage++
					this.getVideoInfo()
				}, 1000)
			}
		},
	
		methods: {
			btnAcatar() {
				if (this.options.shop_id == this.shopData[this.current].shop_id) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					this.$wanlshop.auth(
						`/pages/note/indexList?id=${this.shopData[this.current].user_id}&shop_id=${this.shopData[this.current].shop_id}`
					)
				}
			},

			// 点击分享按钮 打开分享弹出框
			clickshare() {
				this.shareShow = true
			},
			// 关注
			btnGZ() {
				this.$api.post({
					url: '/contents/setFindUser',
					data: {
						id: this.shopData[this.current].user_id
					}
				}).then(rs => {
					this.shopData[this.current].follow = !this.shopData[this.current].follow
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				})
			},
			// 收藏
			btnCollect(type) {
				this.$api.post({
					url: '/contents/collect',
					data: {
						id: this.shopData[this.current].id,
					},
				}).then(res => {
					if (res) {
						if (type == 0) {
							this.shopData[this.current].is_collect = 1
							this.shopData[this.current].collect += 1
						}
						if (type == 1) {
							this.shopData[this.current].is_collect = 0
							this.shopData[this.current].collect -= 1
						}
					}
				})
			},
			// 外面点赞
			btnLike1(type) {
				this.$api.post({
					url: '/contents/likes',
					data: {
						id: this.shopData[this.current].id,
						type: 'contents'
					},
				}).then(res => {
					if (res) {
						if (type == 0) {
							this.shopData[this.current].is_like = 1
							this.shopData[this.current].likes += 1
						}
						if (type == 1) {
							this.shopData[this.current].is_like = 0
							this.shopData[this.current].likes -= 1
						}
					}
				})
			},
			// 弹出框 评论点赞
			btnLike(id, index, type, stauts, fType) {

				this.$api.post({
					url: '/contents/likes',
					data: {
						id: id,
						type: 'comments'
					},
				}).then(res => {
					if (res) {
						if (stauts == 'father') { //父元素点赞
							if (type == 0) { //0 否 1是
								this.commentsData[index].is_like = 1
								this.commentsData[index].likes += 1
							}
							if (type == 1) { //0 否 1是
								this.commentsData[index].is_like = 0
								this.commentsData[index].likes -= 1
							}
						}
						if (stauts == 'son') { //父元素点赞
							if (type == 0) { //0 否 1是
								this.commentsData[fType].children[index].is_like = 1
								this.commentsData[fType].children[index].likes += 1
							}
							if (type == 1) { //0 否 1是
								this.commentsData[fType].children[index].is_like = 0
								this.commentsData[fType].children[index].likes -= 1
							}
						}
					}
				})
			},

			//回复消息
			btnHH(id, k) {
				this.parent_id = id
				if (k == 1) {
					if (this.focus1 == true) {
						this.focus1 = false
						setTimeout(() => {
							this.focus1 = true

						}, 50)
						return
					}
					this.focus1 = true
					return
				}
				if (this.hfFocus == true) {
					this.hfFocus == false
					setTimeout(() => {
						this.hfFocus = true
					}, 50)
					return
				}
				this.hfFocus = true
			},
			hfBlur() {
				this.hfFocus = false
			},
			// 打开 popup
			btnfocus() {
				this.popupShow = true
			},
			//回复 发表评论 谈起键盘中的发送按钮
			btnComment() {
				this.$api.post({
					url: '/contents/comment',
					data: {
						id: this.shopData[this.current].id,
						content: this.inputValue,
						parent_id: this.parent_id,
						adcode: uni.getStorageSync('address').ad_info ? uni.getStorageSync('address').ad_info
							.adcode : '',
						city: uni.getStorageSync('address').ad_info ? uni.getStorageSync('address').ad_info.city :
							'',
					}
				}).then(res => {
					if (res) {
						this.shopData[this.current].comments += 1
						if (res.parent_id) { // 回复第一层
							this.commentsData.forEach((i, k) => {
								if (i.id == res.top_parent_id) {
									this.commentsData[k].children.unshift(res)
								}
							})
						} else { // 发表评论
							this.commentsData.unshift(res)

						}
						this.inputValue = ''
						this.parent_id = ''

						// this.commentsData = []
						// this.page = 1
						// this.getComments()


					}
				})
			},

			// 展开文字
			scrolltolowerImg() {},
			// 弹出框评论 滚动
			scrolltolower() {
				if (!this.scrollType) {
					return
				}
				if (!this.disableTrigger) {
					return
				}
				this.disableTrigger = false
				this.commentsPage++
				this.getComments()
			},
			//预览图片
			previewImage(e, k) {
				console.log(e, k);
				let imgData = []
				e.forEach(a => {
					imgData.push(this.$wanlshop.oss(a))
				})

				uni.previewImage({
					longPressActions: true,
					current: k,
					urls: imgData
				});
			},
			// 点击视频 暂停播放
			btnPayVideo() {
				this.$nextTick(() => {
					let videoContext = uni.createVideoContext('id' + this.current)
					if (this.videoType == false) {
						videoContext.pause() //开始播放当前视频S
						this.videoType = true
					} else {
						videoContext.play()
						this.videoType = false
					}
				})

			},
			// 动态修改图片高度 
			getswiperImageInfo() {
				// 如果有图片才会执行，不然报错
				if (this.PayVideo[this.current].imageUrl) {
					uni.getImageInfo({
						src: this.$wanlshop.oss(this.PayVideo[this.current].imageUrl[0]),
						success: (res) => {
							console.log(res)
							let endwidth = res.width / res.height
							this.swiperheight = 'height:' + (100 / endwidth) + "vw"
						},
						fail: (err) => {
							console.log(err)
						}
					});
				}
			},
			// 获取数据源
			getVideoInfo(id) {

				this.$api.get({
					url: '/wanlshop.user/contentsList',
					data: {
						page: this.commentsPage,
						limit: 10,
						type: this.options.type,
						user_id: this.options.user_id,
						me: this.options.me,

					}
				}).then(res => {
					if (res.data) {
						res.data.forEach((a, k) => {
							if (a.type == 'video') {
								a.videoUrl = this.$wanlshop.oss(a.content_url)
							}

							if (a.id == id) {
								// 头上导航栏标题
								uni.setNavigationBarTitle({
									title: a.title,
								});

								this.current = k
								return
							}

						})

						// onLoad 进入
						if (id) {
							this.getDetail(id)
							this.PayVideo = res.data //上下滑动总数据
							//  如果当前是视频，自动播放
							if (this.PayVideo[this.current].type == 'video') {
								let videoContext = uni.createVideoContext('id' + this.current)
								this.$nextTick(function() {
									setTimeout(() => {
										// 自动播放当前视频
										videoContext.play()
									}, 500)
								})
							}
						} else {
							// 没有id 参数进入 ：刷到最后一条提前请求
							this.PayVideo = this.PayVideo.concat(res.data)
						}
						if (res.current_page == res.last_page) {
							this.commentsPage = 1
						}


					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// current改变时会触发change 事件
			changefun(e) {},
			animationfinish(e) {
				console.log(this.current, this.PayVideo.length);
				let current = e.detail.current
				// 动态修改标题
				uni.setNavigationBarTitle({
					title: this.PayVideo[current].title,
				});
				// 是否展示 暂停键
				this.videoType = false
				// animationfinishfun
				// 如果上个是视频 停止播放
				if (current !== 0) {
					if (this.PayVideo[current - 1].type == 'video') {
						let videoContext = uni.createVideoContext('id' + (current - 1))
						videoContext.pause()
					}
				}
				if (this.PayVideo[current].type == 'video') {
					this.$nextTick(() => {
						setTimeout(() => {
							let videoContext = uni.createVideoContext('id' + current)
							videoContext.play() //开始播放当前视频
							this.getDetail(this.PayVideo[current].id)
						}, 500)
					})
				}
				//保存当前下标 播放下一个视频时停止上一个视频 防止声音重复
				this.current = current
				if (this.PayVideo[current].type == 'image') {
					this.getDetail(this.PayVideo[current].id)
					if (this.shopData[this.current] && this.PayVideo[this.current].imageUrl) {
						this.getswiperImageInfo()
					}
				}
				// 如果当前页码 马上等于数据长度 请求数据
				if (this.current + 2 == this.PayVideo.length) {
					this.commentsPage++
					this.getVideoInfo()
				}

			},
			// 暂停视频播放
			videoStop() {
				let videoContext = uni.createVideoContext('id' + this.current)
				videoContext.pause()
			},
			// 获取详情数据
			getDetail(id) {
				let url = '/contents/detail'
				if (this.options.gotype == 'my') {
					if (this.options.tabIndex == 0 || this.options.tabIndex == 4) {
						url = '/wanlshop.user/contentEditDetail'
					}
				}
				this.$api.post({
					url: url,
					data: {
						id: id
					}
				}).then(res => {
					if (res) {
						this.commentsData = []
						if (res.type == 'image') {
							
							this.$nextTick(() => {
								setTimeout(() => {
									this.$set(this.PayVideo[this.current], 'imageUrl', res
										.content_url)
									this.getswiperImageInfo()
									this.$set(this.shopData, this.current, res)
									this.getComments(id)
								}, 100)
							})
						}

						if (res.type == 'video') {
						
							this.$nextTick(() => {
								setTimeout(() => {
									this.$set(this.shopData, this.current, res)
									this.getComments(id)
									console.log(this.shopData, this.current);
								}, 100)
							})

						}

					}
				})
			},
			// 评论数据
			getComments(id) {
				this.$api.get({
					url: "/contents/getComments",
					data: {
						page: this.commentsPage,
						limit: 10,
						id: this.shopData[this.current].id
					}
				}).then(res => {
					if (res.data) {
						this.disableTrigger = true
						// 总条数
						this.PayVideo[this.current].commentsTotal = res.total
						this.commentsData = this.commentsData.concat(res.data)
						if (res.current_page == res.last_page) {
							this.scrollType = false
						}
					}
				})
			},
		},
		// 监听页面隐藏
		onHide() {
			this.videoStop()
		},
		// 监听页面卸载	
		onUnload() {
			this.videoStop()
		},

	}
</script>

<style scoped lang="scss">
	.buttonOpen {
		border: none;
		padding: 0;
		background-color: transparent;
	}

	.buttonOpen::after {
		border: none !important;
	}

	.imageSwiper {
		height: 100% !important;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.acatarBox {
		position: relative;

		.acatar {
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 4rpx;
			border-radius: 50%;
		}

		.iconPlus {
			position: absolute;
			bottom: -0rpx;
			left: calc(50% - 16rpx);
			bottom: -16rpx;
			background: red;
			border-radius: 50%;
			width: 32rpx;
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconPlusImage {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.iconVideoStop {
		position: absolute;
		z-index: 999;
		left: calc(50% - 40rpx);
		top: calc(50% - 40rpx);
		width: 80rpx;
		height: 80rpx;
	}

	.gz {
		background: #FF7030;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 6rpx 28rpx;
	}

	.imageGoods {
		.bottom {
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 32rpx 16rpx 32rpx;

			.timeCity {
				margin-top: 18rpx;
				padding-bottom: 18rpx;
				border-bottom: 1rpx #ccc solid;
			}

			.shop {
				width: 100%;
				background: #EEEEEE;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				height: 112rpx;
				box-sizing: border-box;
				padding-right: 20rpx;

				.imageAvatar {
					width: 112rpx;
					height: 112rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}
	}

	.imgAcatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.videoGoods {
		position: absolute;
		bottom: 140rpx;
		left: 0rpx;
		z-index: 999;
		width: calc(100% - 100rpx);
		box-sizing: border-box;

		.dwShop {
			width: 100%;
			bottom: 170rpx;
			/* #ifdef MP-WEIXIN */
			bottom: 180rpx;
			/* #endif */
			padding: 32rpx 32rpx 0 32rpx;




		}

	}

	.videoIcon {
		position: absolute;
		bottom: 200rpx;
		right: 20rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.goodsImg {
		border: 1rpx #ccc dashed;
		border-radius: 10rpx;
		width: 112rpx;
		height: 112rpx;
	}

	.shareBox {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 24rpx 32rpx 16rpx 32rpx;

		position: relative;

		.shareImg {
			width: 96rpx;
			height: 96rpx;
		}
	}

	.popupBox {
		display: flex;
		flex-direction: column;
		height: 900rpx;
		box-sizing: border-box;
		padding: 24rpx 32rpx 16rpx 32rpx;

		position: relative;

		.popupBoxScroll {
			height: 600rpx;
		}

		.popupBoxScroll1 {
			height: 848rpx;
		}

		.ml55 {
			margin-left: 56rpx;
		}


		.img {
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
		}

		.closeIcon {
			position: absolute;
			right: 20rpx;
			top: 10rpx
		}

		.inputBottom {
			background: #fff;
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			height: 100rpx;
			bottom: 0rpx;
			z-index: 2;
			left: 0;
			padding: 0 32rpx;
			box-sizing: border-box;

			.inputBottom {
				width: 100%;
			}

			::v-deep .uni-input-input {
				width: 100%;
				border-radius: 40rpx !important;
			}
		}



		.goodsBox {
			padding-bottom: 24rpx;
			border-bottom: 1rpx #ccc solid;
			height: 146rpx;
		}


	}


	.topBar {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-content: center !important;
		position: fixed;
		top: 20rpx;
		z-index: 999;

		.title {
			// min-width: 0;
			flex: 1;
			margin-left: -17rpx;
			padding: 0 24rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.circle {
		background: rgba(34, 34, 34, 0.4);
		border-radius: 50%;
		z-index: 2;
		height: 70px;
		width: 70px;
		position: fixed;
		top: 0;
		bottom: 441rpx;
		left: 31rpx;

		margin: auto;

		.red {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 3;
			height: 35px;
			width: 35px;
		}
	}

	.uniInput {
		/* #ifdef MP-WEIXIN */
		height: 60rpx !important;
		border-radius: 40rpx !important;
		background: #eee;
		padding-left: 30rpx;
		box-sizing: border-box;
		height: 100%;
		/* #endif */

		::v-deep .uni-input-wrapper {
			height: 60rpx;

			.uni-input-input {
				border-radius: 40rpx !important;
				background: #eee;
				padding-left: 30rpx;
				box-sizing: border-box;
				height: 100%;
			}

			.uni-input-placeholder {
				color: #3d3d3d;
				z-index: 2;
				padding-left: 30rpx;
				font-size: 24rpx;
				box-sizing: border-box;
			}
		}

	}

	.swiper {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 88rpx);

		/* #endif */
		.imgSwiper {
			width: 100vw;
			max-height: 1260rpx !important;
		}

		::v-deep .uni-swiper-wrapper {
			// max-height: 1260rpx !important;
		}

		.bottomBox {
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			height: 100rpx;
			padding: 16rpx 32rpx 16rpx 16rpx;
			align-items: center;
			box-sizing: border-box;
			background: #fff;




		}

		.imageBox {
			position: fixed;
			bottom: 100rpx;
			background: #fff;
			width: 100%;
			border-radius: 16rpx 16rpx 0 0;
		}

		.new-swiper-item {
			height: 100vh;
			/* #ifdef H5 */
			height: calc(100vh - 174rpx);
			/* #endif */
			position: relative;

			.commentsBox {
				padding: 0 28rpx;

				.img {
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
				}
			}
		}

		.new-swiper-item-image {
			padding-bottom: 110rpx;
		}

		.uni-bg-black {
			background: black;
		}

		.uni-bg-black1 {
			background: #fff;
		}
	}

	.video {
		width: 100%;
		height: 98vh;
		/* #ifdef H5 */
		height: calc(98vh - 88rpx);
		/* #endif */
		position: relative;
		z-index: 998;
	}

	.left_box {
		position: fixed;
		bottom: 90rpx;
		left: 24rpx;

		.ke_context {
			overflow-y: scroll;
			max-height: 300rpx;
			white-space: pre-wrap;
			width: 700rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			white-space: pre-wrap;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		}

		.height {
			margin-bottom: 40rpx;
		}

		.ren {
			margin: 20rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		}

		.auto {
			display: flex;
			align-items: center;
			width: 310rpx;
			height: 60rpx;
			margin-top: 24rpx;
			opacity: 1;
			border-radius: 8rpx;
			padding-left: 10rpx;

			cover-view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 90px;
				text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
			}

			cover-image {
				margin-right: 10rpx;
				height: 28rpx;
				width: 26rpx;
			}
		}

		.ke {
			display: flex;
			align-items: center;
			width: 310rpx;
			height: 60rpx;
			background: rgba(0, 0, 0, 0.3);
			opacity: 1;
			border-radius: 8rpx;
			padding-left: 10rpx;

			cover-view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 90px;
				text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
			}

			cover-image {
				margin-right: 10rpx;
				height: 40rpx;
				width: 40rpx;
			}
		}
	}

	.H_T {
		z-index: 2;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		position: absolute;
		padding: 0 30rpx;
		background: transparent;
		justify-content: space-between;

		.back {
			height: 48rpx;
			width: 48rpx;
		}

		.search {
			height: 48rpx;
			width: 48rpx;
		}
	}

	.right_box {
		width: 100rpx;
		position: absolute;
		z-index: 2;
		bottom: 60rpx;
		right: 12rpx;
		display: flex;
		flex-direction: column;

		.top1 {
			position: relative;
			height: 124rpx;

			.avatar_img {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}

			.add_img {
				position: absolute;
				z-index: 99;
				width: 48rpx;
				height: 48rpx;
				bottom: 10rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}

		.top2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 37rpx;

			.t_img {
				height: 72rpx;
				width: 72rpx;
				margin-bottom: 10rpx;
			}

			.font_t {
				font-size: 26rpx;
				font-family: SF Pro Text;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);

				text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);
				text-align: center;
			}
		}

	}
</style>